<template>
	<view class="container">
		<view class="goods_contain"  >
			<u-waterfall class="goods_content" v-model="flowList">
				<template v-slot:left="{leftList}">
					<goodItme v-for="(item, index) in leftList" :img="item.image" :price="item.price" :dec="item.dec" :goodId="item.id" @count="total"  />
				</template>
				<template v-slot:right="{rightList}">
					<goodItme v-for="(item, index) in rightList" :img="item.image" :price="item.price" :dec="item.dec" :goodId="item.id"  @count="total"  />
				</template>
			</u-waterfall>
		</view>
		<view class="footer">
			<view class="sum_box">
				<view class="sum_left">
					<view class="num_icon">
						<u-icon name="/static/icon/shop_icon.png" size="60" color="#fff"></u-icon>
						<view class="num">
							0
						</view>
					</view>
					<view class="price_box">
						<view class="price">
							￥2278.00
						</view>
						<view class="price_sub">
							已优惠¥120元，已满减200
						</view>
					</view>
				</view>
				<view class="sum_btn">
					去结算
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import shopHead from '@/plugins/shop_header/shop_header.vue'
	import addBtn from "@/plugins/add_btn/add_btn.vue"
	import goodItme from "@/plugins/good_item/good_item.vue"
	
	export default {
		data() {
			return {
				flowList: [{
						id:1,
						price: 35,
						title: '测试商品1',
						dec: '测试商品1的描述',
						image: '/static/image/goods_item.png',
					},
					{
						id:2,
						price: 75,
						title: '测试商品2',
						dec: '测试商品21231的描去啊阿萨大情为全文述',
						image: '/static/image/goods_item.png',
					},
					{
						id:3,
						price: 385,
						title: '测试商品3',
						dec: '李白杜甫白居易旗阿萨大阿萨大舰店',
						image: '/static/image/goods_item.png',
					},
					{
						id:4,
						price: 3825,
						title: '测试商品4',
						dec: '李白杜甫白居易旗阿萨大阿萨大舰店',
						image: '/static/image/goods_item.png',
					},
				],
				totalNum:0
				}

		},

		components: {
			shopHead,
			addBtn,
			goodItme,
		
		},
		methods: {
			navTap(index) {
				this.navIndex = index
			},
			total(value){
			
			}
		}
	}
</script>

<style lang="scss" scoped>
	

	page {
		
		box-sizing: border-box;
		height: 100%;
		width: 100%;
		background-color: #f5f5f5;
	}

	.container {
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		padding-bottom: 108rpx;
	}

	.goods_contain {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		padding: 0 15rpx;
		background-color: #FFFFFF;
		

		
		.goods_tp1 {
			box-sizing: border-box;
			height: 221rpx;
			width: 100%;

			.tp1_img {
				width: 100%;
				height: 100%;
			}

		}
		.goods_content {
			width: 100%;
		}
		
	}
	.footer{
		width: 100%;
		height: 108rpx;
		position: fixed;
		bottom: 20rpx;
		padding: 0 $paddingBoth;
		box-sizing: border-box;
			.sum_box{
				background-color: #555555;
				height: 100%;
				box-sizing: border-box;
				padding-left: $paddingBoth;
				display: flex;
				border-radius: $base-radius;
				.sum_left{
					display: flex;
					align-items: center;
					height: 100%;
					flex: 1;
					.num_icon{
						position: relative;
						height: 100%;
						display: flex;
						align-items: center;
						.num{
							position: absolute;
							top:$paddingBoth;
							right: 0;
							width: 26rpx;
							height: 26rpx;
							background-color: #E02E24;
							border-radius: 50%;
							font-size: 20rpx;
							color: #fff;
							text-align: center;
							line-height: 26rpx;
						}
					}
					.price_box{
						display: flex;
						flex-direction: column;
						color: #fff;
						height: 100%;
						margin-left: 18rpx;
						justify-content: center;
						.price{
							font-size: 40rpx;
						}
						.price_sub{
							font-size: 26rpx;
							color: rgba($color: #ffffff, $alpha: 0.8);
						}
					}
				}
				.sum_btn{
					background-color: #E02E24;
					width: 150rpx;
					height: 100%;
					color: #fff;
					font-size: 32rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 0 $base-radius $base-radius 0;
				}
				
			}
	}
</style>
